<div>
  <a (click)="addEmptyRow()"><i nz-icon nzType="plus" nzTheme="outline"></i>新增行</a>&nbsp;
  <!-- <button nz-button (click)="printTableData()" >打印表格数据</button>
  <button nz-button (click)="setTest()" >手动设置</button> -->
  <a (click)="refreshTable()"><i nz-icon nzType="sync" nzTheme="outline"></i>&nbsp;刷新</a>
</div>
&nbsp;
<nz-table #zorroTable nzBordered [nzData]="vari.tableData" nzSize="small">
    <thead>
      <tr>
        <th nzWidth="6%">#</th>
        <ng-container *ngFor="let item of opts_req.tableStyle">
          <th *ngIf="!item.immutable" [nzWidth]="item.width_percent_str" 
            [nzAlign]="colHeaderAlign(item.field_name)">
            {{ item.text }}
          </th>
        </ng-container>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of zorroTable.data;let rowIndex=index" (dblclick)="startEdit(rowIndex,data['uuid'],$event)"
        (mouseover)="mouseOver(mouseOverUUID = data.uuid)" [class.strip]="rowIndex%2 == 0">
        <td><!-- 序号 + 图标列 -->
          <div *ngIf="!cache.detail[data['uuid']].edit;else editIconTpl">
            <div *ngIf="data.uuid === mouseOverUUID;else rowIndexTpl" nz-row nzType="flex" 
              nzJustify="space-between">
              <div nz-col nzSpan="10"><!-- 删除 nz-tooltip nzTooltipTitle="删除"-->
                <a 
                  nz-popconfirm
                  nzPopconfirmTitle="您确定要删除当前行?"
                  (nzOnConfirm)="deleteRow(rowIndex,data['uuid'])"
                  (nzOnCancel)="cancelDeleteRow()"
                  nzPopconfirmPlacement="top"
                ><i nz-icon nzType="delete" nzTheme="outline"></i></a>
              </div>

              <div nz-col nzSpan="10"><!-- 启动编辑 nz-tooltip nzTooltipTitle="复制"  -->
                <a 
                  (click)="copyRow(rowIndex,data['uuid'])"><i nz-icon nzType="copy" nzTheme="outline"></i></a>
                <!-- <a (click)="startEdit(rowIndex,data['uuid'])"><i nz-icon nzType="edit" nzTheme="outline"></i></a> -->
              </div>
            </div>
            <ng-template #rowIndexTpl>{{rowIndex+1}}</ng-template>
          </div>

          <ng-template #editIconTpl>
            <div nz-row nzType="flex" nzJustify="space-between">
              <div nz-col nzSpan="10"><!-- 取消编辑 nz-tooltip nzTooltipTitle="取消编辑" -->
                <a 
                  (click)="cancelEdit(rowIndex,data['uuid'])"><i nz-icon nzType="redo" nzTheme="outline"></i></a>
              </div>


              <div nz-col nzSpan="10"><!-- 保存 nz-tooltip nzTooltipTitle="保存" -->
                <a 
                 (click)="saveEdit(rowIndex,data['uuid'])"><i nz-icon nzType="save" nzTheme="outline"></i></a>
              </div>
            </div>
          </ng-template>
        </td>

        <ng-container *ngFor="let tsRow of opts_req.tableStyle">
          <td *ngIf="!tsRow.immutable" [nzAlign]="colContentAlign(tsRow.field_name)">
            <!-- 显示模式 -->
            <ng-container *ngIf="!cache.detail[data['uuid']].edit;else editTpl">

              <ng-container *ngIf="tsRow.date_pipe;else plainShowTpl">
                {{ data[tsRow.field_name] | date:tsRow.date_formatter }}
              </ng-container>
              <ng-template #plainShowTpl>
                {{ convertRaw2Show(data,tsRow) }}
              </ng-template>

            </ng-container>
            
            <ng-template #editTpl><!-- 编辑模式，使用 switch 枚举用于编辑的控件类型 -->

              <span [ngSwitch]="tsRow.ctl_type">
              <p *ngSwitchCase="'optsEnum'"><!-- 下拉选择 - 枚举 -->
                <nz-select nzShowSearch nzAllowClear nzPlaceHolder="" [(ngModel)]="cache.detail[data.uuid].data[tsRow.field_name]" style="width: 100%;">
                  <nz-option *ngFor="let item of opts_enum[tsRow.field_name]" [nzLabel]="item.label" [nzValue]="item.value"></nz-option>
                </nz-select>

              </p>
              <p *ngSwitchCase="'date'"><!-- 日期控件 -->
                <nz-date-picker [(ngModel)]="cache.detail[data.uuid].data[tsRow.field_name]"
                  nzFormat="yyyy-MM-dd"></nz-date-picker>
              </p>
              <p *ngSwitchDefault><!-- 常规的 input -->
                <input type="text" nz-input [(ngModel)]="cache.detail[data.uuid].data[tsRow.field_name]" 
                  (ngModelChange)="inputChange(cache.detail[data.uuid].data,tsRow)"/>
              </p>

              <p *ngSwitchCase="'locked'"><!-- 被锁定 -->
                {{ cache.detail[data.uuid].data[tsRow.field_name] }}
                <!-- {{ resolveFormula(data,tsRow) }} -->
              </p>

              </span>

            </ng-template>

          </td>
        </ng-container>

      </tr>

      <!-- 统计 -->
      <tr>
        <td>合计：</td>
        <ng-container *ngFor="let tsRow of opts_req.tableStyle">
          <td *ngIf="!tsRow.immutable" [nzAlign]="'right'">
            <ng-container *ngIf="tsRow.statistics;else elseBlock">
              {{ vari.statistics[tsRow.field_name]?.label }}
            </ng-container>
            
            <ng-template #elseBlock></ng-template>
          </td>
        </ng-container>
        
      </tr>
    </tbody>
  </nz-table>